<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      xmlns:xi="http://www.w3.org/2001/XInclude"
      xmlns:mochi="http://www.mochikit.com/">
  <xi:include href="master.html" />

<head>
<!--specify refresh time in general_format.js-->
<title>Roles</title>
<link rel="stylesheet" type="text/css" media="screen" href="${tg.url('/css/style.css')}" />

<script type = "text/javascript">

function autos_cookie(value) {
  var expdate = new Date();
  expdate.setSeconds(expdate.getSeconds()+10);
  document.cookie = "autos_disp=" + value + ";expires=" + expdate;
}

function show_or_hide_autos() {
  var temp;
  if (document.getElementById("auto_button").value == "Show Autoroles") {
    for (var i = 0; lessthan(i, ${numRoles}); i++) {
      temp = document.getElementById("autorole"+i);
      if (temp)
        temp.style.display = "";
    }
    document.getElementById("auto_button").value = "Hide Autoroles";
  } else {
    for (var i = 0; lessthan(i, ${numRoles}); i++) {
      temp = document.getElementById("autorole"+i);
      if (temp)
        temp.style.display = "none";
    }
    document.getElementById("auto_button").value = "Show Autoroles";
  }
}

var temp_sort_key = 1; //specify the column to sort when loading the page
var numtables = 1; //number of tables in the web page
var sort_managers_array = new Array(numtables);

</script>

<script type = "text/javascript" src="/cloudcrvjs/drawinggraph.js"></script>
<script type = "text/javascript" src="/cloudcrvjs/raphael.js"></script>
<script type = "text/javascript" src="/cloudcrvjs/sortable_tables.js"></script>
<script type = "text/javascript" src="/cloudcrvjs/general_format.js"></script>
<script type = "text/javascript" src="/cloudcrvjs/ibox.js"></script>
<!--ibox must go after sortable_tables when load js files-->

<!--using onload causes problems with sortable_tables; used addLoadEvent (seems like a MochiKit function)-->
<script type = "text/javascript">

function extraload() {
  var temp = getCookie("autos_disp");
  if(temp == "Hide Autoroles") {
    document.getElementById("auto_button").value = "Hide Autoroles";
  } else {
    document.getElementById("auto_button").value = "Show Autoroles";
  }   
  show_or_hide_autos();

  //for specifying a different sort_key for a specific table
  //sort_managers_array[1].sortkey = 0;
}

function extraunload() {
  var temp = document.getElementById("auto_button").value;
  if(temp == "Show Autoroles") {
    autos_cookie("Hide Autoroles");
  } else {
    autos_cookie("Show Autoroles");
  }
}

addLoadEvent(function () { pageload("roles", numtables); extraload(); });
</script>

</head>

<body onUnload = "unload('roles', 1); extraunload();"> <!--the second argument of unload must be equal to numtables (see above)-->

<table>
<tr><td width = "100" align = "left" valign = "top">
<div py:for = "i in range(0, len(SC_colors))">
  <font size="+1" style="BACKGROUND-COLOR: ${SC_colors[i]}" color = "black">${SC_table[i]}</font><br /><br />
</div>
</td>

<!-- ~~~~~~~~~~~~~~~GRAPH~~~~~~~~~~~~~~~~ -->

<td>
<div id = "graph" style = "overflow:auto; width:900px;">

<script type = "text/javascript">
var xbox = 100;//width of role boxes
var ybox = 30;//height of role boxes
var fontsize = 14;//font size of role boxes
var xsplit = 0;//space between role boxes; automatically calculated
var ysplit = 100;//space between rows of role boxes
var yinit = 50;//white space at top of graph
var paperwidth = 800;//for drawing space for graph
var paperheight = yinit+${len(rolelol)-1}*ysplit+${len(rolelol)}*ybox+yinit;//for drawing space for graph
var paper = new Raphael("graph", paperwidth, paperheight);
var staggertrigger = 6;//number of boxes in a row that triggers staggering of boxes in a row
var staggeramt = ysplit/4;//amount to stagger boxes in a row
var temp, tempt, tempstag, tempcur, tempdep;//temp variables
var infoAr = new Array(${numNotAutos});//keeps track of dimension info for arrow drawing
sizeAll = 0;//used to fill up infoAr; keep at 0

</script>

<div py:for = "i in range(0, len(rolelol))">
  <script type = "text/javascript">
    xsplit = paperwidth/${len(rolelol[i])+1};
    if (lessthan(${len(rolelol[i])}, staggertrigger))
      tempstag = 0;
    else
      tempstag = staggeramt;
  </script>
  <div py:for = "j in range(0, len(rolelol[i]))">
    <script type = "text/javascript">
      //draws boxes
      temp = drawRectCenter(paper, ${j+1}*xsplit, ${i}*ysplit+yinit+tempstag, xbox, ybox);
      temp.click(function(){iBox.showURL("${'/disprole/'+rolelol[i][j].getAttr('name')+'/attr/dependOnLocal'}")});
      temp.mouseover(function(){this.attr("cursor", "pointer")});
      temp.attr("fill", "${SC_colors[rolelol[i][j].status % len(SC_colors)]}");

      //stores dimension information in infoAr
      infoAr[sizeAll] = new RoleBoxInfo("${rolelol[i][j].getAttr('name')}", ${j+1}*xsplit, ${i}*ysplit+yinit+tempstag, xbox, ybox);
      
      //displays text for role boxes
      tempt = paper.text(${j+1}*xsplit, ${i}*ysplit+yinit+tempstag, "${rolelol[i][j].getAttr('name')}");
      tempt.attr("font-size", fontsize);
      tempt.click(function(){iBox.showURL("${'/disprole/'+rolelol[i][j].getAttr('name')+'/attr/dependOnLocal'}")});
      tempt.mouseover(function(){this.attr("cursor", "pointer")});

      tempstag *= -1;
      sizeAll++;
    </script>
  </div>
</div>

<!--drawing arrows-->
<!--process: for each role, draw arrows to each dependOn role; tempcur is the current role that is being looked at; tempdep is each dependOn role for tempcur-->
<div py:for = "role in notAuto">
  <script type = "text/javascript">
    tempcur = findRoleByName("${role.getAttr('name')}", infoAr);//uses information stored in infoAr
  </script>
  <div py:for = "dep in role.dependOn">
    <div py:if = "dep.getAttr('name').find('autorole') >= 0">
    <!--don't display autoroles: if a dependOn role is an autorole, then need to find the dependOn roles of the autorole so tempcur can point to those; autoroles do not depend on other autoroles, so this only needs to check one level of autoroles-->
      <div py:for = "role2 in dep.dependOn">
        <script type = "text/javascript">
          tempdep = findRoleByName("${role2.getAttr('name')}", infoAr);
          roleToRoleArrow(paper, tempcur, tempdep);//draws arrows from one role box to another; see drawinggraph.js for code of roleToRoleArrow
	</script>
      </div>
    </div>
    <script type = "text/javascript">
      tempdep = findRoleByName("${dep.getAttr('name')}", infoAr);
      if(tempdep) {
        roleToRoleArrow(paper, tempcur, tempdep);
      }
    </script>
  </div>
</div>

</div>
</td>
</tr>
</table>

<!--<h2>Roles  <a href = "/vms2">VMs</a>  <a href = "/clusters2">Clusters</a></h2>-->

<!-- ~~~~~~~~~~~~~STARTING TABLE~~~~~~~~~~~~~~~~ -->

<input type = "button" id = "auto_button" value = "Hide Autoroles" onclick = "show_or_hide_autos()"/>

<div id = "table0" style="overflow:auto; width:900px;">
<table  cellspacing="0" border = "1" id="sortable_table0" class = "datagrid sofT"><!--goes with sortable_table.js-->
    <thead>
      <tr>
	  <th class="helpHed" mochi:format="str" style="cursor:pointer">VM</th>
	  <th class="helpHed" mochi:format="int" style="cursor:pointer">RoleID</th>
          <th class="helpHed" mochi:format="str" style="cursor:pointer">Name</th>
	  <th class="helpHed" mochi:format="str" style="cursor:pointer">Status</th>
	  <th class="helpHed" mochi:format="str" style="cursor:pointer">Attributes</th>
	  <th class="helpHed" mochi:format="str" style="cursor:pointer">dependOn</th>
	  <th class="helpHed" mochi:format="str" style="cursor:pointer">Local depOn</th>
	  <th class="helpHed" mochi:format="str" style="cursor:pointer">dependBy</th>
	  <th class="helpHed" mochi:format="str" style="cursor:pointer">Local depBy</th>
	  <th class="helpHed" mochi:format="str" style="cursor:pointer">roleDef</th>
	  <th class="helpHed" mochi:format="str" style="cursor:pointer">enabled</th>
      </tr>
    </thead> 
    <tbody>
      <div py:for="i in range(0, len(roles))">
        <tr id = "${find_auto(roles[i].getAttr('name'))+str(i)}">
<!--name, status, attr, dependOn, dependOnLocal, dependBy, dependByLocal, roleDef, vm, enabled-->
	    <td>
	      <a href = "${'/dispvm/'+roles[i].vm.getAttr('name')+'/attr'}" rel = "ibox">${roles[i].vm.getAttr("name")}</a></td>
	    <td>
	      ${roles[i].Role_ID}</td>
	    <td>
	      ${roles[i].getAttr("name")}</td>
	    <td bgcolor="${SC_colors[roles[i].status % len(SC_colors)]}">
	      <font color = "black">
	      ${SC_table[roles[i].status]}</font></td>
	    <td>
	      <!--see disprole in root.py for code-->
	      <a href = "${'/disprole/'+roles[i].getAttr('name')+'/attr'}" rel = "ibox" >Show</a></td>
	    <td>
	      <a href = "${'/disprole/'+roles[i].getAttr('name')+'/dependOn'}" rel = "ibox">Show</a></td>
	    <td>
	      <a href = "${'/disprole/'+roles[i].getAttr('name')+'/dependOnLocal'}" rel = "ibox">Show</a></td>
	    <td>
	      <a href = "${'/disprole/'+roles[i].getAttr('name')+'/dependBy'}" rel = "ibox">Show</a></td>
	    <td>
	      <a href = "${'/disprole/'+roles[i].getAttr('name')+'/dependByLocal'}" rel = "ibox">Show</a></td>
	    <td>
	      ${roles[i].roleDef.getAttr("name")}</td>
	      <!--need rp value here?-->
	    <td>
	      ${roles[i].getAttr("enabled")}</td>
	</tr>
      </div>
    </tbody>
</table>
</div>

<br />
<br />
<br />


</body>

</html>
